﻿PuppetPlay.RotationBoard = function (config) {
    Kinetic.Group.apply(this, [config]);
    this._initComponents();
   
    this.pointerAngle = Math.PI / 2;
}

PuppetPlay.RotationBoard.prototype = {
    _initComponents: function () {
        var that = this;
        var radius = 80;
        var angle = Math.PI * 0.37;

        var rs = PuppetPlay.Sources.Images.controls.rotateWheel;
        rs.zoomFactor = 1;
        this.add(new PuppetPlay.Image(rs));

        
        this.add(new Kinetic.Shape({
            stroke: 'rgba(0,0,0,0.7)',
            strokeWidth: 10,
            drawFunc: this.attrs.pointerDrawFunc
        }));


		
		var setting = PuppetPlay.Setting;
        var proxyRadius = 60;
        var proxy = document.createElement('div');

        proxy.className = 'pp-rotate-proxy';
        proxy.style.left = this.attrs.proxyPosition.x - 60 + 'px';
        proxy.owner = this;
        this.proxy = proxy;
        document.body.appendChild(proxy);

        if (PuppetPlay.Util.isMsTouch) {
            $(proxy).on('MSPointerDown.' + this.attrs.id, this.onPointerDown);
        } else {
            proxy.addEventListener('mousedown', this.onPointerDown, false);
        }
    },

    onPointerDown: function (e) {
        e = e.originalEvent;
        var owner = this.owner;
		this.oldPos = {
                x: e.clientX + window.pageXOffset, 
                y: e.clientY + window.pageYOffset
        };
        if(PuppetPlay.Util.isMsTouch){
            $(this).on('MSPointerMove.' + owner.attrs.id, owner.onPointerMove);
            $(document).on('MSPointerUp.' + owner.attrs.id, owner.onPointerUp);
            Kinetic.Global.pointerMap[e.pointerId] = this;
        } else {
            this.addEventListener('mousemove', this.owner.onPointerMove, false);
        }
        //console.log('Pointer down pointer:' + [this.oldPos.x, this.oldPos.y]);
    },

    onPointerMove: function (e) {
        try {
            e = e.originalEvent;
            var proxy = Kinetic.Global.pointerMap[e.pointerId];
            var owner = proxy.owner;
            var currentPos = {
                x: e.clientX + window.pageXOffset,
                y: e.clientY + window.pageYOffset
            };

            var center = owner.getAbsolutePosition();
            center = {
                x: center.x + 63,
                y: center.y + 80
            };
            var dx1 = currentPos.x - center.x;
            var dy1 = currentPos.y - center.y;
            var dx2 = proxy.oldPos.x - center.x;
            var dy2 = proxy.oldPos.y - center.y;
            var c = Math.sqrt(dx1 * dx1 + dy1 * dy1) * Math.sqrt(dx2 * dx2 + dy2 * dy2);
            var rotateDeg = Math.acos((dx1 * dx2 + dy1 * dy2) / c);

            if ((proxy.oldPos.x - center.x) * (currentPos.y - proxy.oldPos.y) -
                (proxy.oldPos.y - center.y) * (currentPos.x - proxy.oldPos.x) > 0) {
                rotateDeg = -rotateDeg;
            }

            if (isNaN(rotateDeg)) {
                console.log('Control stick rotate deg isNaN!');
                return;
            }

            if (owner.attrs.afterRotate) {
                owner.attrs.afterRotate(rotateDeg);
            }
            owner.pointerAngle += rotateDeg;
            proxy.oldPos = currentPos;
        } catch (e) {
        }
    },

    onPointerUp: function (e) {
        try {
            e = e.originalEvent;
            var proxy = Kinetic.Global.pointerMap[e.pointerId];
            var owner = proxy.owner;
            delete Kinetic.Global.pointerMap[e.pointerId];

            $(proxy).off('MSPointerMove.' + owner.attrs.id, owner.onPointerMove);
            $(this).off('MSPointerUp.' + owner.attrs.id, owner.onPointerUp);  
        } catch (e) {
            
        }
    }
};
Kinetic.Global.extend(PuppetPlay.RotationBoard, Kinetic.Group);